<template>
  <div>
    <pageHeader title="黑名单"></pageHeader>
    <pageMain>
      <el-table :data="pageData.list" style="width: 100%">
        <el-table-column type="selection" width="45" align="center">
        </el-table-column>

        <el-table-column prop="date" label="用户">
          <template slot-scope="scope">
            <div class="user-column overall-flex">
              <avatar :size="34" :src="scope.row.avatar"></avatar>
              <span class="user-column-span">{{ scope.row.username }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="username" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
        <el-table-column
          prop="address"
          fixed="right"
          label="操作"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            <div class="user-options overall-flex">
              <el-link
                type="primary"
                :underline="false"
                icon="el-icon-edit-outline"
                @click="clickLookUser(scope.row, scope.$index)"
              ></el-link>
              <el-link
                type="danger"
                :underline="false"
                icon="el-icon-delete"
                @click="clickRemoveUser(scope.row, scope.$index)"
              ></el-link>
              <el-link
                type="info"
                :underline="false"
                icon="el-icon-more-outline"
              ></el-link>
            </div> </template
        ></el-table-column>
      </el-table>
    </pageMain>
  </div>
</template>

<script>
import avatar from "~/avatar/avatar.vue";
import pageHeader from "~/page-header/page-header.vue";
import pageMain from "~/page-main/page-main.vue";
import manageAPI from "@/api/manage";
export default {
  components: {
    pageMain,
    pageHeader,
    avatar,
  },
  data() {
    return {
      pageData: {
        page: 1,
        limit: 10,
        total: 100,
        list: [
          {
            username: "",
          },
          {},
          {},
        ],
        where: {
          real_state: 0,
        },
      },
    };
  },
  created() {
    manageAPI
      .blackList()
      .then((res) => {
        console.log(res);

        let { data } = res;

        let { list } = data;

        this.pageData.list = list;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods:{
    clickCancelBlackList(row){
      console.log(row);
    }
  }
};  
</script>
